import { Layout } from '@/layout';

export const meta = {
  title: 'Why my Carousel slides are in vertical orientation?',
  description: 'You forgot to import carousel styles',
  slug: 'carousel-missing-styles',
  category: 'styles',
  tags: ['carousel', '@mantine/carousel', 'broken'],
  created_at: 'September 7, 2024',
  last_updated_at: 'September 7, 2024',
};

export default Layout(meta);

## Carousel component looks broken

If your [Carousel](https://mantine.dev/x/carousel/) component renders slides in vertical orientation
or has incorrect controls/indicators position, you forgot to import carousel styles.
Follow [@mantine/carousel](https://mantine.dev/x/carousel/#installation) installation
instructions to fix the issue. Import `@mantine/core` and `@mantine/carousel` styles at
the root of your application:

```tsx
import '@mantine/core/styles.css';
import '@mantine/carousel/styles.css';
```

## That's it! It works now!

Nice! 👍
